<template lang="pug">
  div.cycleTabWrapper
      div.bac
        el-tabs(v-model="curTab" @tab-click="routeToggle" stretch)
          el-tab-pane(lazy :label="tab.meta.title" v-for="(tab, index) in tabs" :name="tab.path")
      .tab-content-box(:class="{active: isActive}" id="tabContentBox")
        transition(name="fade-transform" mode="out-in")
          keep-alive
            router-view
  </template>
<script></script>
<script>
import { mapGetters } from 'vuex'
import { findTreeNode } from '@/utils/arrayToTree'

export default {
  name: 'Evaluation',
  components: {
  },
  data () {
    return {
      curTab: '',
      tabs: []
    }
  },
  computed: {
    ...mapGetters(['addRoutes'])
  },
  created () {
    this.getTab()
  },
  methods: {
    async getTab () {
      const node = await findTreeNode({ value: 'childCare::evaluation', key: 'name', tree: this.addRoutes })
      this.tabs = node.children.filter(x => !x.hidden)
      this.curTab = this.$route.path
    },
    routeToggle () {
      this.$router.push(this.curTab)
    }
  }
}
</script>
<style lang="scss" scoped>
.cycleTabWrapper ::v-deep .el-tabs__item {
}
.cycleTabWrapper ::v-deep .el-tabs__nav.is-stretch > * {
    flex: 0.1;
    text-align: center;
}
.el-tabs__item.is-active {
  color: #FFB800;
}

.cycleTabWrapper ::v-deep .el-tabs__active-bar {
  height: 4px;
  background: #FFAB00;
  border-radius: 32px;
}
.bac{
  background-color: #FFF;
  padding-top: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.cycleTabWrapper ::v-deep .el-tabs__header{
 margin: 0 !important;
}
</style>
